<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>easylife</title>
	
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
	<link media="all" href="/easylife/Public/Home/css/frozen.css?v=201501248042" rel="stylesheet">
	<!-- <link media="all" href="/easylife/Public/Home/css/ratchet.css?v=201501248042" rel="stylesheet"> -->
	
	<style type="text/css">
		#touchs{
		margin: 10px;width: 100px;height: auto;min-height: 100px;
		border:1px solid #c2ddb6;border-radius: 2px;background: #c2ddb6;
		}
		#touchs li {list-style: none;}
		.clear{
		margin-left: 10px;display:inline-block;height: 24px;width: 40px;color:#fff;
		font-size: 14px;line-height: 24px;background: #c2ddb6;text-align: center;
		}
	</style>

</head>
<body>


<div id="touch_test">
  <span class="clear">clear</span>
  <ul id="touchs">
  </ul>
</div>
	

<script src="/easylife/Public/Home/js/zepto.min.js?v=201501248042"></script>
<script src="/easylife/Public/Home/js/frozen.js"></script>

	<script type="text/javascript">
	 
	(function($){
	  $('#touchs').find('li').remove();

	  $('#touchs').bind("touchstart",function(event){
	    var touchpros =event.touches[0];
	    console.log(touchpros);
	    $('#touchs').append('<li>touchstart...</li>');
	  });

	  $('#touchs').bind("touchmove",function(){
	    $('#touchs').append('<li>touchmove...</li>');
	  });

	  $('#touchs').bind("touchend",function(){
	    $('#touchs').append('<li>touchend...</li>');
	  });

	  $('#touchs').bind("touchcancel",function(){
	    $('#touchs').append('<li>touchcancel...</li>');
	  });

	  $('.clear').bind("click",function(){
	    $('#touchs').find('li').remove();
	  });
	  
	})(Zepto); 
	</script>

</body>
</html>